<template>
    <el-form :model="emailForm" @keyup.enter="onLogin">
        <el-form-item>
            <el-input v-model="emailForm.userEmail" placeholder="请输入邮箱">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="emailForm.emailCode" placeholder="请输入验证码">
                <template #append>
                    <el-text v-if="isCode" @click="toEmail" style="cursor: pointer;">发送验证码</el-text>
                    <el-countdown v-else @finish="timeFinish" class="email-count" format="ss后重新获取" :value="timeValue" />
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-button">
            <el-button type="primary" @click="onLogin()">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import store from '@/stores';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useSendEmailApi } from '@/api/user/user';

const router = useRouter()
const route = useRoute()

const emailForm = reactive({
    userEmail: '',
    emailCode: ''
})
const emailParam = reactive({
    userEmail: '',
    tag: 1
})
const isCode = ref(true)

const timeValue = ref()

const onLogin = () => {
    // 用户登录
    store.useUserStore
        .emailLoginAction(emailForm)
        .then(() => {
            refresh()
            ElMessage({
                message: '登录成功',
                type: 'success'
            })
            // location.reload()
            // router.push({ path: '/' })
        })
}
const toEmail = async () => {
    emailParam.userEmail = emailForm.userEmail
    emailParam.tag = 1
    await useSendEmailApi(emailParam).then(() => {
        ElMessage({
            message: '发送成功',
            type: 'success'
        })
        timeValue.value = Date.now() + 1000 * 60
        isCode.value = false
    })
}

const timeFinish = () => {
    isCode.value = true
}

function refresh() {
    // 刷新当前路由
    const { fullPath } = route
    router.replace({
        path: '/redirect' + fullPath
    })
}

</script>

<style lang="scss" scoped>

.login-button {
    :deep(.el-button--primary) {
        margin-top: 10px;
        width: 100%;
        height: 45px;
        font-size: 18px;
        letter-spacing: 8px;
    }
}


:deep(.el-statistic) {
    --el-statistic-content-font-size: none !important;
    --el-statistic-content-color: none !important;
}
</style>